<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>修改密码</title>
		<link rel="stylesheet" th:href="@{/static/before/css/style.css}" />
		<script src="../../static/before/js/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="../../static/before/css/button.css">
	</head>

	<body>
	<div th:insert="before/header :: header"></div>
	<div th:insert="before/header02 :: header02"></div>

		<div class="grzxbj">
			<div class="selfinfo center">
				<div class="lfnav fl">
					<div class="ddzx">个人中心</div>
					<div class="subddzx">
						<ul>
							<li>
								<a href="myorder.html">我的订单</a>
							</li>
							<li>
								<a href="self_info.html">我的个人中心</a>
							</li>
							<li>
								<a href="lerts.html">消息通知</a>
							</li>
							<!--<li>
								<a href="">优惠券</a>
							</li>-->
							<li>
								<a href="user-address.html">收货地址</a>
							</li>
							<li>
								<a href="pwd-change.html" style="color:#ff6700;font-weight:bold;">修改密码</a>
							</li>
						</ul>
					</div>
				</div>
				<form class="Huiform" id="loginform" th:action="@{pwd-change}" method="post">
				<div class="rtcont fr">
					<div class="ddzxbt">修改密码</div>
					<div class="subgrzl ml40"><span>旧密码</span><span width="400px"><input  id="oldpassword" name="oldpassword" class="input02" type="password"/></span><span id="oldpasswordval"></span></div>
					<div class="subgrzl ml40"><span>新密码 </span><span><input  id="newpassword" name="newpassword" class="input02" type="password" /></span><span id="newpasswordval"></span></div>
					<div class="subgrzl ml40"><span>再次输入</span><span><input id="newpassword2" name="newpassword2" class="input02" type="password"/></span><span id="newpassword2val"></span></div>
					<!--<div class="subgrzl ml40"><span><span id="oldpasswordval"><span id="newpasswordval"><span id="newpassword2val"></span></span>&lt;!&ndash;<span id="newpassword2val"></span>&ndash;&gt;</div>
-->

					<div class="subgrzl ml40" ><input class="button"  type="button" name="button" value="确认" ></span></div>

				</div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
	<div class="clear "></div>
	<div style="position: relative;top: 50px" th:insert="before/footer :: footer"></div>
	</body>
	<script type="text/javascript">
        $(document).ready(function(){
            var flag1 =false;
            var flag2 =false;
            var flag3 =false;
            //获取密码焦点
            $("#oldpassword").focus(function(){
                $("#oldpasswordval").empty()
            })

            //失去密码焦点
            $("#oldpassword").blur(function () {
                oldpwd()
            })

            //获取新密码焦点
            $("#newpassword").focus(function(){
                $("#newpasswordval").empty()
            })

            //失去新密码焦点
            $("#newpassword").blur(function () {
                pwd()
            })
            //获取确认新密码焦点
            $("#newpassword2").focus(function(){
                $("#newpassword2val").empty()
            })
            //失去确认新密码焦点
            $("#newpassword2").blur(function () {
                repwds()
            })

       //密码确认
            function oldpwd() {
                //获取用户旧密码
                var pwd = $("#oldpassword").val();
                if(pwd==null||pwd==""){
                    $("#oldpasswordval").html("密码不能为空").css("color","red ");
                    return false
                }else if(pwd.length<6&&pwd.length>15){
                    $("#oldpasswordval").html("密码长度不能小于6或大于15").css("color","red ");
                    return flag3 =false;
                }else{
                    $.ajax({
                        "url":"/pwd",
                        "type":"get",
                        "data":"pwd="+pwd,
                        "dataType" : "json",
                        "success":function(data){
                            if(data.error==false){
                                $("#oldpasswordval").html("密码错误").css("color","red")
                                return  flag3 =false;

                            }else{
                                $("#oldpasswordval").html("密码正确").css("color","green")
                                return  flag3 =true;
                            }

                        }
                    });
                    return flag3;
                }
            }


            function pwd() {
                //获取用户输入密码
                var pwd = $("#newpassword").val();
                if(pwd==null||pwd==""){
                    $("#newpasswordval").html("密码不能为空").css("color","red ");
                    return false
                }else if(pwd.length<6&&pwd.length>15){
                    $("#newpasswordval").html("密码长度不能小于6或大于15").css("color","red ");
                    return flag1 =false;
                }else{
                    $("#newpasswordval").html("密码格式正确").css("color","green ");
                    return flag1 =true;
                }
            }

            //验证密码一致性
            function repwds() {
                //获取用户输入密码
                var repwd = $("#newpassword2").val();
                var pwd = $("#newpassword").val();
                if(repwd==null||repwd==""){
                    $("#newpassword2val").html("密码不能为空").css("color","red ");
                    return flag2 =false;
                }else if(repwd.length<6){
                    $("#newpassword2val").html("密码长度不能小于6").css("color","red ");
                    return flag2 =false;
                }else if(repwd!=pwd){
                    $("#newpassword2val").html("两次输入的密码不相同").css("color","red ");
                    return flag2 =false;
                }else{
                    $("#newpassword2val").html("密码一致").css("color","green ");
                    return flag2 =true;
                }
            }

            //表单提交
            $(".button").click(function(){


                if(flag1==true&&flag2==true&&flag3==true ) {
                    alert(flag3)
                    $("#loginform").submit();
                }
            })


        })
	</script>

</html>